<template>
  <div style="padding: 10px">
    <div>
      <el-form :inline="true" style="margin-top: 20px" >
        <el-form-item>
          <span style="margin-left: 50px">总计</span>
          <span>({{ $store.getters.price }})</span>
        </el-form-item>
        <el-form-item
          ><el-input
            v-model="$store.state.MiniNum"
            placeholder="请输入最低价格"
          ></el-input
        ></el-form-item>
        <el-form-item
          ><el-input
            v-model="$store.state.MaxNum"
            placeholder="请输入最高价格"
          ></el-input
        ></el-form-item>
        <el-form-item
          ><el-button
            @click="$store.commit('search')"
            type="success"
            class="el-icon-search"
          ></el-button
        ></el-form-item>
        <el-form-item>
          <el-button type="danger" @click="$store.commit('px')"
            >价格由低到高</el-button
          >
          <el-button type="primary" @click="$store.commit('pxs')">价格由高到低</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="list"
      stripe
      style="width: 100%; margin-top: 20px"
      border
      @select-all="$store.commit('allCheck')"
    >
      <el-table-column type="selection" label="全选" width="80">
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.status"
            @change="$store.commit('checkAll')"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="商品"> </el-table-column>
      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope">
          <el-image :src="scope.row.pic" style="width: 50px" lazy></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="180"> </el-table-column>
      <el-table-column label="价格" width="180px">
        <template slot-scope="scope">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item
              ><el-button
                type="success"
                size="mini"
                @click="$store.commit('numJian', scope.row)"
                >-</el-button
              ></el-form-item
            >
            <el-form-item
              ><el-input :value="scope.row.num" style="width: 50px"></el-input
            ></el-form-item>
            <el-form-item
              ><el-button
                type="success"
                size="mini"
                @click="$store.commit('numJia', scope.row)"
                >+</el-button
              ></el-form-item
            >
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="小计" width="180px">
        <template slot-scope="scope">
          {{ scope.row.price * scope.row.num }}
        </template>
      </el-table-column>
      <el-table-column label="删除" width="180px">
        <template slot-scope="scope">
          <el-button type="danger" @click="$store.commit('del', scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {};
  },
  computed: {
    list() {
      return this.$store.state.list;
    },
  },
  watch: {},
  created() {},
  mounted() {
    //   调用 actions
    this.$store.dispatch("GetCartList");
  },
  methods: {},
};
</script>
<style scoped>
</style>